<template>
  <div class="bodyBar">
    <div class="button-container">
      <!--      <el-button @click="upload_dialog.open=true">上传</el-button>-->
      <button class="button green" @click="upload_dialog.open=true">
        <i class="fa fa-cart-plus"></i>Upload
      </button>
    </div>
    <div class="container">
      <div class="bg-items" v-for="(item, index) in tableData" :key="index">
        <div class="items" :style="{ 'background-image': 'url(' + getItemUrl(item.bucketName,item.fileName) + ')' }">
          <div class="details">
            <h3>#{{ index + 1 }}</h3>
            <p>{{ item.nickeName }}</p>
            <h6>{{ item.uploadTime }}</h6>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="upload_dialog.open" :title="'文件上传'" width="30%" >
      <el-form inline class="horizontal-form">
        <el-form-item label="存储桶名：" prop="bucketName">
          <el-input v-model="upload_dialog.bucketName" placeholder="请输入存储桶名"></el-input>
        </el-form-item>
        <el-form-item label="文件名：" prop="nickName">
          <el-input v-model="upload_dialog.nickName" placeholder="请输入文件名"></el-input>
        </el-form-item>
      </el-form>
      <div class="upload-container">
        <el-upload
            class="upload-demo"
            action="#"
            :multiple="false"
            :on-change="hanleFileSelected"
            :auto-upload="false"
            accept="image/*">

          <el-button size="small" type="primary">图片上传</el-button>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="upload_dialog.open=false">取消</el-button>
          <el-button @click="upload">确认</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>
import SparkMd5 from "spark-md5";
import $axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      items: [
        { imageUrl: 'https://picsum.photos/240/160/?image=1082', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        { imageUrl: 'https://picsum.photos/240/160/?image=1069', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        { imageUrl: 'https://picsum.photos/240/160/?image=1069', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        { imageUrl: 'https://picsum.photos/240/160/?image=1069', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        { imageUrl: 'https://picsum.photos/240/160/?image=1069', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        { imageUrl: 'https://picsum.photos/240/160/?image=1069', description: 'this is a description for your photo in your gallery.', date: 'time & date' },
        // 可以继续添加更多的图片信息
      ],
      fileList: [],
      upload_dialog: {
        open: false,
        bucketName: '',
        nickName: '',
        fileList:[],
        file: null
      },
    }
  },
  created() {
    this.init()
  },
  watch: {
    dialogVisible(newVal, oldVal) {
      if (!newVal) {
        // 对话框关闭时执行清空操作
        this.upload_dialog.file = null;
      }
    }
  },
  methods: {
    async init() {
      await this.getFiles("img").then(res =>{
        if (String(res.data.code) === '200') {
          this.tableData = res.data.data
          console.log(this.tableData)
        }
      })
    },
    getItemUrl(bucketName,fileName) {
      // 使用你提供的后端下载接口来获取URL
      return 'api/' + bucketName + '/' +fileName;
    },
    hanleFileSelected(file,fileList){
      this.upload_dialog.file = file.raw
    },
    upload(){
      let file = this.upload_dialog.file
      let metaFile
      this.$axios.post('/api/meta',{
        fileSize: file.size,
        extension: file.name.substr(file.name.lastIndexOf('.') ? file.name.lastIndexOf('.') : 0 ),
        bucketName: this.upload_dialog.bucketName,
        nickName: this.upload_dialog.nickName,
        fileType: "img"
      }).then(res => {
        console.log(res.data)
        metaFile = res.data.data
      }).then(res =>{
        let chunks = metaFile.chunks
        let filename = metaFile.filename
        let bucketName = metaFile.bucketName
        let taskCount = 0
        for (let chunk of chunks){
          if (chunk.completed){
            continue
          }
          let chunkContent = file.slice(chunk.chunkStart,chunk.chunkStart + chunk.chunkSize)
          console.log(chunkContent)
          const formData = new FormData()
          formData.append('chunkNo',chunk.chunkNo)
          formData.append('file',chunkContent)
          formData.append('bucketName',bucketName)
          formData.append('filename',filename)
          new Promise((res,rej) => {
            let fileReader = new FileReader()
            let spark = new SparkMd5.ArrayBuffer()
            fileReader.readAsArrayBuffer(chunkContent)
            fileReader.onload = (e) => {
              spark.append(e.target.result)
              let md5 = spark.end()
              res(md5)
            }
          }).then(md5 => {
            formData.append('md5',md5)
            this.$axios.post('/api/chunk/upload',formData)
                .then(res => {
                  console.log(res)
                  chunk.completed = true
                  taskCount += 1
                  if (taskCount == chunks.length){
                    this.init()
                    this.$message('文件上传完成')
                    this.upload_dialog ={
                      open: false,
                      bucketName: '',
                      nickName: '',
                      fileList:[],
                      file: null
                    }
                  }
                })
          })
        }
      })
    },
    getFiles(fileType) {
      return $axios({
        url: '/info/meta/files/' + fileType,
        method: 'get',
      })
    },
  }
}
</script>

<style scoped>
.bodyBar{
  padding: 20px;
  background: #FFFFFF;
}
.button-container {
  margin-top: 20px; /* 设置按钮容器与上方组件之间的间距 */
  display: flex; /* 使按钮水平排列 */
  justify-content: flex-start; /* 按钮在主轴（水平方向）上对齐到起点 */
  margin-bottom: 15px;
}
.button {
  font-size: 20px; /* 调整按钮文字大小 */
  font-family: Raleway;
  line-height: normal; /* 重置行高 */
  padding: 15px 25px; /* 调整按钮内边距 */
  border-radius: 10px; /* 调整按钮圆角 */
  box-shadow:
      0px 8px 0px 0px #2980b9,
      0px 0 20px rgba(255,255,255,.2) inset,
      2px 30px 0px rgba(255,255,255,.1) inset,
      5px 15px 30px -10px #000;
  border: 1px solid #2980b9;
  cursor: pointer;
  background: #3498db;
  color: #ecf0f1;
  text-shadow: 1px 1px 1px #34495e;
  transform: rotateX(5deg);
  margin: 10px 10px;
  /*width: 280px;*/
  text-align: center; /* 文字居中 */
}

.button i {
  padding-right: 10px; /* 调整图标和文字之间的间距 */
  transform: scale(1.1) translate(0,-1px);
}

.button:hover{
  margin-top: 15px;
  margin-bottom: 5px;
  box-shadow:
      0px 5px 0px 0px #2980b9, /* button thickness */
      0px 0 50px rgba(134, 243, 255, 1) inset, /* inner glow */
      5px 28px 0px rgba(255,255,255,.15) inset, /* sublte reflection */
      0px 0px 30px rgba(134,243,255,.2), /* outer glow */
      5px 15px 30px -10px #000; /* dark shadow underneath */
  color: #fff;
  filter: saturate(1.5);
}
.button:hover i{
  transform: rotate(-12deg) translate(1px, -3px) scale(1.2);
}
.button:active{
  margin-top: 18px;
  margin-bottom: 2px;
  box-shadow:
      0px 2px 0px 0px #2980b9, /* button thickness */
      0px 0 100px 10px rgba(134, 243, 255, 1) inset, /* inner glow */
      5px 25px 0px rgba(255,255,255,.1) inset, /* sublte reflection */
      0px 0px 30px rgba(134,243,255,.5), /* outer glow */
      5px 15px 30px -10px #000; /* dark shadow underneath */
  filter: saturate(1.7);
}
.button:active i{
  transform: rotate(-22deg) translate(2px, -5px) scale(1.3);
}
.red{
  filter: hue-rotate(155deg);
}
.red:hover{
  filter: hue-rotate(155deg) saturate(1.5);
}
.red:active{
  filter: hue-rotate(155deg) saturate(1.7);
}
.green{
  filter: hue-rotate(255deg) saturate(.8);
}
.green:hover{
  filter: hue-rotate(255deg) saturate(1);
}
.green:active{
  filter: hue-rotate(255deg) saturate(1.2);
}
.container {
  width  : 960px;
  margin : 0 auto;
}

.container:after{
  clear   : both;
  display : table;
  content : '';
}

.bg-items {
  padding: 20px;
  width  : 240px;
  height : 160px;
  margin : 20px;
  background-color: white;
  float  : left;
  cursor : pointer;
  box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}

.items {
  width  : 240px;
  height : 160px;
  position: relative;
  overflow: hidden;
  background-color: #102B46;
}

.details {
  background-color : rgba(0,0,0,0.5);
  width            : 220px;
  height           : 140px;
  padding          : 10px;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 0;
  transition : opacity .8s;
}

.details h3 {
  margin-bottom : 20px;
}

.details h6 {
  text-align : right;
  margin-top : 40px;
}

.details p {
  font-size : 14px;
  font-style: italic;
  text-align: center;
  line-height : 20px;
}

.items:hover .details {
  opacity : 1;
  transition : opacity .2s .3s;
}

.items div {
  position : absolute;
}

/* one */

.one {
  left   : 100%;
  bottom : 100%;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
}

.items:hover .one {
  transition   : all .3s;
  left   : 0;
  bottom : 0;
}

/* two */

.two {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left   : 0;
  bottom : 100%;
}

.items:hover .two {
  transform : rotate(180deg);
  left   : 0;
  bottom : 0;
  transition   : all .3s;
}

/* three */

.three {
  left : 0;
  top  : 0;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  transform: scale(0,0);
}

.items:hover .three {
  left : 0;
  top  : 0;
  transform : scale(1,1);
  transition : all .3s;
}

/* four */

.four {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left : 0;
  top  : 0;
  transform: scale(0,0) rotate(0deg);
}

.items:hover .four {
  left : 0;
  top  : 0;
  transform: scale(1,1) rotate(1080deg);
  transition   : all .3s;
}

/* five */

.tl5 {
  border-top   : 161px solid #e43;
  border-right : 241px solid transparent;
  top  : -160px;
  left : -240px;
  transition   : all .3s;
}

.br5 {
  border-bottom : 161px solid #e43;
  border-left   : 241px solid transparent;
  bottom : -160px;
  right  : -240px;
  transition   : all .3s;
}

.items:hover .tl5 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .br5 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

/* six */

.tl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top  : -80px;
  left : -240px;
  transition   : all .3s;
}

.tr6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top   : -80px;
  right : -240px;
  transition   : all .3s;
}

.br6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom: -80px;
  right : -240px;
  transition   : all .3s;
}

.bl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom : -80px;
  left   : -240px;
  transition   : all .3s;
}

.items:hover .tl6 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .tr6 {
  top   : 0;
  right : 0;
  transition   : all .3s;
}

.items:hover .br6 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

.items:hover .bl6 {
  bottom : 0;
  left   : 0;
  transition   : all .3s;
}

/* seven */

.seven {
  width  : 240px;
  height : 160px;
  background-color : #e43;
  opacity : 0;
  transition   : all .3s;
}

.items:hover .seven {
  opacity    : 1;
  transition : all .3s;
}

/* eight */

.eight {
  top           : 30%;
  left          : 10%;
  border-right  :  100px solid transparent;
  border-bottom :  70px  solid #e43;
  border-left   :  100px solid transparent;
  transform: rotate(35deg) scale(0,0);
  transition : all .6s;
}

.eight:before {
  border-bottom: 80px solid #e43;
  border-left  : 30px solid transparent;
  border-right : 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}

.eight:after {
  position: absolute;
  display: block;
  color: #e43;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #e43;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

.items:hover .eight {
  transform: rotate(35deg) scale(3.5,3.5);
  transition : all .6s;

}

/* nine */

.nine {
  width : 0;
  height: 0;
  top   : 50%;
  left  : 50%;
  background-color: #e43;
  border-radius : 50%;
  transition : all .3s;
}

.items:hover .nine {
  width : 340px;
  height: 260px;
  top   : -50px;
  left  : -50px;
  transition : all .6s;

}

/* ten */

.ten {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  left   : 100%;
}

.ten.i {
  top : 0;
  transition : all .2s;
}

.ten.ii {
  top : 40px;
  transition : all .4s;
}

.ten.iii {
  top : 80px;
  transition : all .6s;
}

.ten.iv {
  top : 120px;
  transition : all .8s;
}

.items:hover .i {
  left : 0;
  transition : all .2s;
}

.items:hover .ii {
  left : 0;
  transition : all .4s;
}

.items:hover .iii {
  left : 0;
  transition : all .6s;
}

.items:hover .iv {
  left : 0;
  transition : all .8s;
}

/* eleven */

.eleven {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
}

.eleven.i {
  top : 0;
  left : -100%;

}

.eleven.ii {
  top : 40px;
  left : 100%;
}

.eleven.iii {
  top : 80px;
  left : -100%;
}

.eleven.iv {
  left : 100%;
  top  : 120px;
}

.items:hover .eleven {
  left : 0;
  transition : all .4s ;
}

/* twelve */

.twelve {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
  top : -40px;
}

.twelve.iv {
  transition : all .1s;
}

.twelve.iii {
  transition : all .1s .1s;
}

.twelve.ii {
  transition : all .1s .2s;
}

.twelve.i {
  transition : all .1s .3s;
}

.items:hover .twelve.i {
  top : 120px;
  transition : all .2s;
}

.items:hover .twelve.ii {
  top : 80px;
  transition : all .2s .2s ;
}

.items:hover .twelve.iii {
  top : 40px;
  transition : all .2s .4s ;
}

.items:hover .twelve.iv {
  top : 0px;
  transition : all  .2s .6s;
}

/* thirteen */

.thirteen-r , .thirteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.thirteen-r {
  left : 100%;
}

.thirteen-l {
  right : 100%;
}

.items:hover .thirteen-r {
  transition : all .3s;
  left : 0;
}

.items:hover .thirteen-l {
  transition : all .3s;
  right : 0;
}

/* fourteen */

.fourteen-r , .fourteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.fourteen-r {
  left : 100%;
}

.fourteen-l {
  right : 100%;
}

.items:hover .fourteen-r {
  transition : all .3s;
  left : 50%;
}

.items:hover .fourteen-l {
  transition : all .3s;
  right : 50%;
}

/* fifteen */

.t {
  border-style : solid;
  border-width : 80px 120px 0 120px;
  border-color : #e43 transparent transparent transparent;
  transition   : all .3s;
  top : -80px;
}

.r {
  border-style : solid;
  border-width : 80px 120px 80px 0;
  border-color : transparent #e43 transparent transparent;
  right : -120px;
  transition   : all .3s;
}

.b {
  border-style : solid;
  border-width : 0 120px 80px 120px;
  border-color : transparent transparent #e43 transparent;
  bottom : -80px;
  transition   : all .3s;
}

.l {
  border-style : solid;
  border-width : 80px 0 80px 120px;
  border-color : transparent transparent transparent #e43;
  left : -120px;
  transition   : all .3s;
}


.items:hover .t {
  top : 0px;
  transition : all .3s;
}

.items:hover .r {
  right : 0px;
  transition : all .3s;
}

.items:hover .b {
  bottom : 0px;
  transition : all .3s;
}

.items:hover .l {
  left : 0px;
  transition : all .3s;
}

</style>